<template>
    <div>
        <div @click="clickBarChart" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <ChartBubble/>
            </n-icon>
            <Handle id="ChartBubble-inlet" type="target" :position="Position.Left"
                    :is-valid-connection="props.isValidSourcePos"/>
            <Handle id="ChartBubble-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>气泡图</span>
        <n-drawer v-model:show="active" :width="'80vw'">
            <n-drawer-content>
                <template #header>
                    气泡图
                </template>
                <!--获取上级节点数据 进行去除空值-->
                <n-space>
                    <n-button @click="getSuperiorData">
                        <template #icon>
                            <n-icon>
                                <Login/>
                            </n-icon>
                        </template>
                        获取上级节点数据
                    </n-button>
                    <n-button
                        @click="drawing"
                        :disabled="!selects.representative||!selects.contrast"
                    >
                        <template #icon>
                            <n-icon>
                                <ChartBubble/>
                            </n-icon>
                        </template>
                        绘图
                    </n-button>
                    <n-select
                        class="n-select-one"
                        placeholder="名字"
                        v-model:value="selects.name"
                        :options="props.data.data.title"
                        label-field="title"
                        value-field="key"
                        :disabled="!props.data.data.title"
                    />
                    <n-select
                        class="n-select-one"
                        placeholder="X轴系列值(x)"
                        v-model:value="selects.representative"
                        :options="props.data.data.title"
                        label-field="title"
                        value-field="key"
                        :disabled="!props.data.data.title"
                    />
                    <n-select
                        class="n-select-one"
                        placeholder="Y轴系列值(Y)"
                        v-model:value="selects.contrast"
                        :options="props.data.data.title"
                        label-field="title"
                        value-field="key"
                        :disabled="!props.data.data.title"
                    />
                    <n-select
                        class="n-select-one"
                        placeholder="系列气泡大小(S)"
                        v-model:value="selects.area"
                        :options="props.data.data.title"
                        label-field="title"
                        value-field="key"
                        :disabled="!props.data.data.title"
                    />
                    <n-input-number v-model:value="selects.number" placeholder="放大倍数" class="n-select-one"/>
                </n-space>
                <!--展示数据-->
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div ref="chartDom" style="width: 100%;height:80%;"></div>
                <template #footer>
                    <n-button @click="active=false">完成</n-button>
                </template>
            </n-drawer-content>
        </n-drawer>
    </div>
</template>

<script setup>

import {Handle, Position} from "@vue-flow/core";
import {ChartBubble, Login} from "@vicons/carbon";
import {useElementsStore} from "@/stores/elements";
import * as echarts from 'echarts';


const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'id', 'data'])
const elements = useElementsStore()
const clickBarChart = () => {
    active.value = true
    setTimeout(() => {
        if (props.data.selects) {
            Object.keys(props.data.selects).forEach(key => {
                if (selects.value.hasOwnProperty(key)) {
                    selects.value[key] = props.data.selects[key];
                }
            });
        }
        if (selects.value.representative !== null &&
            selects.value.contrast !== null &&
            selects.value.area !== null
        ) {
            drawing();
        }
    }, 1)
}
// 抽屉
const active = ref(false)
const selects = ref({
    representative: null,
    contrast: null,
    area: null,
    name: null,
    number: null
})

const option = ref(null)
let chartDom = ref(null)

const getSuperiorData = () => {
    // 获取上级节点数据
    for (let i of elements.elements) {
        if (i['target'] === props.id) {
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    props.data.data = {...j.data.data}
                    props.data.data.title.map(s => {
                        // 移除可修改
                        delete s.render
                        return s
                    })
                    return
                }
            }
        }
    }
}
const drawing = () => {
    const data = [
        [
            // ["28604", "77", "17096869", 'Australia'],
            // ["31163", "77.4", "27662440", 'Canada'],
            // ["1516", "68", "1154605773", 'China'],
            // ["13670", "74.7", "10582082", 'Cuba'],
            // ["28599", "75", "4986705", 'Finland'],
            // ["29476", "77.1", "56943299", 'France'],
            // ["31476", "75.4", "78958237", 'Germany'],
            // ["28666", "78.1", "254830", 'Iceland'],
            // ["1777", "57.7", "870601776", 'India'],
            // ["29550", "79.1", "122249285", 'Japan'],
            // ["2076", "67.9", "20194354", 'North Korea'],
            // ["12087", "72", "42972254", 'South Korea'],
            // ["24021", "75.4", "3397534", 'New Zealand'],
            // ["43296", "76.8", "4240375", 'Norway'],
            // ["10088", "70.8", "38195258", 'Poland'],
            // ["19349", "69.6", "147568552", 'Russia'],
            // ["10670", "67.3", "53994605", 'Turkey'],
            // ["26424", "75.7", "57110117", 'United Kingdom'],
            // ["37062", "75.4", "252847810", 'United States']
        ]
    ];
    for (let i of props.data.data.data) {
        data[0].push([
            i[selects.value.representative],
            i[selects.value.contrast],
            +i[selects.value.area],
            i[selects.value.name],
        ])
    }
    console.log(data)
    // 绘图
    option.value = {
        title: {
            text: '气泡图',
            left: '5%',
            top: '3%'
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        legend: {
            right: '10%',
            top: '3%',
            data: []
        },
        grid: {
            left: '8%',
            top: '10%'
        },
        xAxis: {
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        yAxis: {
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            scale: true
        },
        series: [
            {
                name: '1990',
                data: data[0],
                type: 'scatter',
                symbolSize: function (data) {
                    return (Math.sqrt(data[2] * (selects.value.number === null ? 1 : selects.value.number) * 10000000) / 5e2);
                },
                emphasis: {
                    focus: 'series',
                    label: {
                        show: true,
                        formatter: function (param) {
                            return param.data[3];
                        },
                        position: 'top'
                    }
                },
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetY: 5,

                }
            },
        ],
        dataZoom: [
            {
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                start: 0,
                end: 100
            },
            {
                type: 'slider',
                show: true,
                yAxisIndex: [0],
                left: '93%',
                start: 0,
                end: 100
            },
        ],
    }
    let myChart = echarts.init(chartDom.value);
    props.data.selects = selects.value
    console.log(option.value)
    props.data.option = option.value
    option.value && myChart.setOption(option.value);
}
</script>

<style scoped lang="less">
.n-select-one {
    width: 9vw;
}

.n-select-two {
    width: 45vw;
}

.n-space {
    .n-space-span {
        position: relative;
        top: 18%;
    }
}
</style>